<template>
    <el-dialog
    :title="title"
    :visible.sync="show"
    width="70%"
    top="2vh"
    :close-on-click-modal="false"
    append-to-body
    :before-close="close">
        <el-table   border :data="combinationProductList"  :span-method="objectSpanMethod">
                <el-table-column  align="center" label="组件名称" prop="combinationName" show-overflow-tooltip></el-table-column>
                <el-table-column label="产品名称" prop="productName" show-overflow-tooltip></el-table-column>
                <el-table-column label="产品类型" prop="productTypeName" show-overflow-tooltip></el-table-column>
                <el-table-column label="单位" prop="unit"></el-table-column>
                <el-table-column label="产品数量" prop="productNum"></el-table-column>
                <el-table-column label="销售单价（元）" width="120" prop="actualPrice"></el-table-column>
                <el-table-column  align="center" label="合计" prop="totalAmount"></el-table-column>
                <el-table-column  label="备注"  align="center" prop="combinationRemark" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                   <el-button type="danger" size="mini" @click.native="delCombination(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
        </el-table>
    </el-dialog>
</template>

<script>
export default {
  props: {
    title: String,
    visible: Boolean,
    data: Array
  },
  watch: {
    visible: {
      handler (val) {
        this.show = val
      },
      immediate: true
    },
    show (val) {
      this.$emit('update:visible', val)
    },
    data: {
      handler (val) {
        if (val) {
          this.combinationProductList = val
          this.getSpanArr(this.combinationProductList, 'combinationName')
        }
      },
      deep: true,
      immediate: true
    }
  },
  components: {},
  data () {
    return {
      show: false,
      combinationProductList: [],
      spanArr: [],
      pos: 0
    }
  },
  methods: {
    close () {
      this.show = false
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 6 || columnIndex === 7 || columnIndex === 8) {
        const rowSpan = this.spanArr[rowIndex]
        const colSpan = rowSpan > 0 ? 1 : 0
        console.log('rowSpan-colSpan', rowSpan, colSpan)
        return {
          rowspan: rowSpan,
          colspan: colSpan // 相当于给给表格加上rowspan,colspan属性
        }
      }
    },
    getSpanArr (data, key) {
      this.spanArr = []
      if (data === null) {
        return
      }
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          if (data[i][key] === data[i - 1][key]) {
            this.spanArr[ this.pos ] += 1// 合并行数
            this.spanArr.push(0)// 新增一个被合并行 0表示要合并
          } else {
            this.spanArr.push(1)// 否则不合并
            this.pos = i// 指向位移
          }
        }
      }
    },
    delCombination (row) {
      this.$emit('delCombination', row)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
